<template>
  <el-container id="home" class="home-container">
    <el-header class="home-container-header theme-font">
      <span>
        请开始使用你的 todolist
      </span>
      <el-button
        circle
        class="home-container-header-userinfo-btn el-icon-user"
        title="个人信息"
        @click="showDrawer"
      />
    </el-header>
    <el-drawer
      :size="300"
      title="个人信息"
      :visible.sync="drawerVisible"
      direction="rtl"
    >
      <user-info/>
    </el-drawer>
    <el-main class="home-container-main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :lazy="true" label="任务列表" name="tasks">
          <taskList ref="tasks" :height="taskHeight"/>
        </el-tab-pane>
        <el-tab-pane :lazy="true" label="已完成任务" name="completedTasks">
          <taskCompletedList ref="completedTasks" :height="taskHeight"/>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      drawerVisible: false,
      activeName: 'tasks',
      taskHeight: 0
    };
  },
  mounted() {
    const mainElm = document.querySelector('#home .home-container-main');
    this.$nextTick(() => {
      this.taskHeight = mainElm.offsetHeight - 140;
    });
  },
  methods: {
    showDrawer() {
      this.drawerVisible = true;
    },
    handleClick() {
      this.$refs[this.activeName]?.$fetch();
    }
  }
};
</script>

<style scoped lang="scss">
.home-container {
  height: 100%;

  &-header {
    font-size: larger;
    font-weight: 700;
    text-align: center;
    position: relative;

    &::before {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }

    &-userinfo-btn {
      position: absolute;
      top: 10px;
      right: 18px;
    }
  }
}
</style>
